import styled from 'styled-components'

import border from 'components/styled/border.js' 

const SwitchStyle = styled.div`
    .mui-switch {
            width: 52px;
            height: 25px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #646464;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 16px;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none; }
        .mui-switch:before {
            content: '';
            width: 23px;
            height: 23px;
            position: absolute;
            top: 0px;
            left: 0;
            border-radius: 16px;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
        .mui-switch:checked {
            border-color: #56D9D1;
            box-shadow: #56D9D1 0 0 0 16px inset;
            background-color: #56D9D1; }
        .mui-switch:checked:before {
            left: 27px; }
        .mui-switch.mui-switch-animbg {
            transition: background-color ease 0.4s; }
        .mui-switch.mui-switch-animbg:before {
            transition: left 0.3s; }
        .mui-switch.mui-switch-animbg:checked {
            box-shadow: #dfdfdf 0 0 0 0 inset;
            background-color: #56D9D1;
            transition: border-color 0.4s, background-color ease 0.4s; }
        .mui-switch.mui-switch-animbg:checked:before {
            transition: left 0.3s; }
`
const ControlStyle = border({
    width:'1px 0 0 0 ',
    comp:styled.div`
        display: flex;
        justify-content:space-between;
        align-items: center;
        width: 100%;
        height: .7rem;
        padding: 0 .14rem 0 .14rem;
        p{
            font-size: .15rem;
            color: #646464;
        }
`
})

export {
    SwitchStyle,
    ControlStyle}